모던 자바스크립트 4,5,6장 정리

변수와 표현식, 데이터 타입

2023-06-20

4장 변수

먼저 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간, 또는 메모 리 공간을 식별하기위한 이름을 의미한다. 즉 변수는, 값의 위치를 가리킨 다

var result = 10 + 20;

//10 + 20이 새로운 값 30을 만들고, 연산을 통해 만들어진 30이 메모리 공간에 저장된다.
//이떄 메모리에 저장된 30을 다시 읽어 재사용가능하게 이름일 붙인것이 변수다

변수에 값을 저장하는 것을 할당이라고 한다. 변수 이름은 식별자라고 도 불리는데, 어떤 값을 구별해, 식별할 수 있는 고유한 이름을 의미한 다.

앞선 코드에서 식별자 result가 값 30을 식별할 수 있었다. 이를 위해 식별자 result 는 값 30이 저장된 메모리 공간을 기억해야 하고, 식별자는 값이 저장된 메모리 주소와 매핑관계를 맺는다.

변수 선언

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할때는

var,let,const

키워 드를 사용한다.

var score;

변수를 선언하고, 아직 변수에 값을 할당하지 않았다. 변수선언으로 확보된 메모리 공 간은 암묵적으로 undefined가 할당되어 초기화된다.

변수선언은 다음과 같은 2단계에 거쳐 수행한다.

선언단계:변수 이름을 등록해 자바스크립트 엔진에 의해 변수의 존재를 알린다.
초기화단계:값을 저장하기 위해 메모리 공간을 확보하고, 암묵적으로 undefined를할 당해 초기화한다.

var키워드는 선언단계와 초기화단계가 동시에 진행된다.

변수 선언의 실행시점과 호이스팅

console.log(score); //undefined

var score; //변수 선언문

위의 undefined가 출력되는 이유는 변수 선언이 소스코드가 한줄씩 실행되는 시점 이 아닌, 이전단계에서 실행되기 때문이다.

값의 할당

var score;
score = 80;

//이걸 하나의 문으로 단축 가능함.

var score = 80;

위의 두 코드는 동일하게 작용한다. 즉 변수 선언과 값의 할당을 2개의 문으로 각각실 행한다.

변수 선언은 런타임 이전에 먼저 실행되지만,할당은 런타임에 실행된다.

마크다운 이미지

값의 재할당

var score = 80;
score = 90;
//값의 재할당

마크다운 이미지

네이밍 컨벤션

네이밍 컨벤션은 소프트웨어 개발에서 변수, 함수, 클래스, 파일 등의 이름을 작성할 때 일관성과 가독성을 위해 따르는 규칙과 규약이다.

카멜 케이스 (Camel Case):

첫 번째 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 표기한다. 예시: myVariable, calculateResult, getUserInfo 파스칼 케이스 (Pascal Case) 또는 대문자 카멜 케이스 (Upper Camel Case):

모든 단어의 첫 글자를 대문자로 표기한다. 예시: MyClass, CalculateResult, GetUserInfo 스네이크 케이스 (Snake Case):

단어들을 모두 소문자로 표기하고, 단어 사이를 언더스코어(_)로 구분한다. 예시: my_variable, calculate_result, get_user_info 케밥 케이스 (Kebab Case) 또는 하이 픈 케이스 (Hyphen Case):

단어들을 모두 소문자로 표기하고, 단어 사이를 하이픈(-)으로 구분한다. 예시: my-variable, calculate-result, get-user-info

표현식과 문

값은 표현식이 평가되어 생성된 결과를 말한다.

10 + 20;
//10 + 20이 평가되어 숫자 값 30을 생성한다.

리터럴은 사람이 이해가능한 문자, 기호를 사용해 값을 생성하는 표기법이다.

3;

마크다운 이미지

표현식

표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로이 뤄질 수 있다. 즉, 값으로 평가될 수 있는 문은 모두 표현식이다.

표현식은 값으로 평가된다. 이때 표현식과 표현식이 평가된 값은 동등한 관계, 즉 동 치이다. 이것은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다.

데이터 타입

마크다운 이미지

숫자 타입

모든 수를 실수로 처리하고, 정수만 표현하기 위한 데이터 타입은 따로 존재하지 않는 다.

var integer = 10;
var double = 10.12;

숫자 타입은 3가지의 특별한 값도 가질 수 있다.

Infinity:양의 무한대
-Infinity:음의 무한대
NaN:산술 연산 불가

console.log(10 / 0); //Infinity
console.log(10 / -0); //-Infinity
console.log(1 * 'string'); //NaN

템플릿 리터럴

템플릿 리터롤로 멀티라인 문자열 , 표현식 삽입 등 문자열 처리 기능을 할 수 있다. 런타임에 일반 문자열로 변환되어 처리된다.

var template = `Template Literal`;

var template = `<ul>\n\t<li><a href = '#">Home</a></li>\n</ul>;

표현식 삽입

문자열은 문자열 연산자 +를 통해 연결할 수 있다.

var first = 'first';

var second = 'last';

console.log(first + second);

undefined

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기회 된다. 값을 저장하기 위 해 메모리에 공간을 확보할 때 해당 공간을 빈 값(대부분 쓰레기 값이 들어있음)으로 내버려두지 않고 undefined로 초기화 한다. 따라서 변수를 선언하고 아무런 할당없이 해당 변수를 참조하면 undefined가 반환된다.

var foo;
console.log(foo); //undefined

undefined를 직접 할당하는 것은 권장하지 않는다. undefined는 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이므로 이를 통해서 어떤 변수를 참조할 때 undefined 가 반환된다면 선언 후 한번도 할당되지 않았다는 것을 알 수 있다. 이것이 undefined 의 본래 취지이며 이를 임의로 사용하는 것은 좋지 않다.

만약 변수에 값이 비어있다는 것을 의미하고 싶다면 null을 할당하면 된다.

심벌 타입

ES6 스팩에서 추가된 7번째 타입으로, 변경이 불가능한 원시 타입의 값이다. 심벌 값 은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 객체의 프로퍼티 키로사 용한다. 키 값으로 심벌 타입의 값을 사용하면 키가 충돌할 일이 없어진다.

var key = Symbol('key');
console.log(typeof key); // Symbol

//객체 생성
var obj = {};

// 이름이 충돌되지 않도록 심볼을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value

데이터 타입은 왜 필요할까?

값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
값을 참조할 때 한번에 읽어들여야 할 메모리 공간의 크기를 결정하기 위해
메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해

동적 타이핑

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 ‘동적 타이핑’이라고 하며, 이러한 특징을 가진 언어를 ‘동적 타입 언어’라고 한다.

단, 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다. 때문에 조심해서 사용하는 것이 필요하다. 가독성이 좋은 코드가 좋은 코드다.